<template>
	<view class="container">
		<view class="swiper">
			<view class="background"></view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#3472FD" indicator-color="#DDDDDD" circular="true"  class="banners">
				<swiper-item  v-for="(item,index) in swiperList" :key="index" class="swiperList">
					<view class="swiper-item">
						<view class="tit">{{item.title}}</view>
						<view class="special">
							<view  v-for="(items,index) in item.specialList" :key="index" class="specialList"  @tap="act">
								<image :src="items.thumb" mode="widthFix" ></image>
								<text>{{items.title}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view><!--轮播-->
		<view class="announce">
			<view class="announceLeft">通知公告</view>
			<view style="width: 4rpx;height: 70rpx;background: #3472FD;margin-top: 20rpx;"></view>
			<view class="announceSwiper">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"  :vertical="true">
					<swiper-item> 
						<view class="swiper-item" v-for="(item,index) in announce" :key="index">
							<view style="width: 9rpx;height: 9rpx;background: #3472FD;border-radius: 50%;margin-top: 20rpx;margin-right: 20rpx;"></view>
							<text>{{item.title}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view><image src="../../static/image/rightIcon.png"></image></view>
		</view><!--通告-->
		<view class="task">
			<view class="taskIcon"><image src="../../static/image/number.png"></image><text>数据分析</text></view>
			<view class="taskcontent">
				<view class="taskLeft">
					<view class="taskTitle">
						35
						<view>任务</view>
					</view>
					<image src="../../static/image/task.png"></image>
				</view>
				<view class="taskRight">
					<view class="taskTitle">
						35
						<view>任务</view>
					</view>
					<image src="../../static/image/dianIcon.png"></image>
				</view>
			</view>
		</view><!--数据分析-->
		<view class="incomplete">
			<view class="incompleteIcon"><image src="../../static/image/number.png"></image>未完成工作区</view>
			<view v-for="(item,index) in fire" :key="index" class="fire" @tap="details(item.applyId,item.status)" >
				<view>{{item.applyType}}</view>
				<view class="company">申请单位：{{item.applyDept}} </view> 
				<view class="company">申请人：{{item.applyUser}}</view>
				<text style="width:100%;height: 4rpx;background-color: #F4F6F9;margin: 0 5rpx;display: block;"></text>
				<view class="number">编号：{{item.applyNo}}</view>
				<view class="prompt">{{item.status}}</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[{
					title:'特殊作业',
					specialList:[{
						thumb:"../../static/image/act.png",
						title:'动火安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'受限空间安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'高处安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'临时用电安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'盲板抽堵安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'吊装安全作业票'
					},{
						thumb:"../../static/image/act.png",
						title:'断路安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'动士安全作业票'
					}]
				},{
					title:'特殊作业2',
					specialList:[{
						thumb:"../../static/image/act.png",
						title:'动火安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'受限空间安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'高处安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'临时用电安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'盲板抽堵安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'吊装安全作业票'
					},{
						thumb:"../../static/image/act.png",
						title:'断路安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'动士安全作业票'
					}]
				},{
					title:'特殊作业3',
					specialList:[{
						thumb:"../../static/image/act.png",
						title:'动火安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'受限空间安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'高处安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'临时用电安全作业票'
					},{
						thumb:"../../static/image/shouIcon.png",
						title:'盲板抽堵安全作业票'
					},{
						thumb:"../../static/image/shortIcon.png",
						title:'吊装安全作业票'
					},{
						thumb:"../../static/image/act.png",
						title:'断路安全作业票'
					},{
						thumb:"../../static/image/heightIcon.png",
						title:'动士安全作业票'
					}]
				}],
				announce:[{
					title:'不核对设备名称、编号带来的设备误1'
				},{
					title:'不核对设备名称、编号带来的设备误2'
				}],
				fire:[
				// 	{
				// 	homework:"动火安全作业票",
				// 	company:'汽机分场',
				// 	person:'热机分场汽机水泵班',
				// 	number:'196GZ20160401523'
				// },{
				// 	homework:"动火安全作业票",
				// 	company:'汽机分场',
				// 	person:'热机分场汽机水泵班',
				// 	number:'196GZ20160401523'
				// }
				]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist() {
				uni.request({
					url: this.$url + 'apply/my/list',
					traditional:true,
					header:{
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					data: {
						id:0
					},
					success: (res) => {
						console.log(res,111)
						this.fire = res.data.rows;
					}
				})
			},
			act:function(){
			// console.log(id)
				uni.navigateTo({
					url:'../work/actionWork/actionWork'
				 })
			},
			details(applyId,status){
				if(status=='草稿'){
					uni.navigateTo({
					    url:'../work/cWork/cWork?applyId='+applyId
					});
					}else{
						uni.navigateTo({
						    url:'../work/workDetails/workDetails?applyId='+applyId
						});
					}
				
			}
		}
	}
</script>

<style>
	/* .container {
		padding: 20rpx; 
		font-size: 28rrpx;
		line-height: 48rrpx;
	} */
	page{background-color: #F2F2F2;}
	.swiper{
		position: relative;
		height: 500rpx;
	}
	.background{
		background-color:#3472FD;
		height:50rpx;
	}
	.swiper .swiper-item{
		padding:20rpx;
	}
	.swiper-item .tit{
		font-size: 30rpx;
	}
	.banners{
		width:100%;
		position: absolute;
		background-color: #FFFFFF;
		top:0;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		height:480rpx
	}
	.special{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width:100%;
		word-wrap: break-word;
		margin-top: 20rpx;
	}
	.special image{
		width:90rpx;
		height: 90rpx;
		margin: auto;
	}
	.specialList{
		width:25%;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.specialList text{
		width:120rpx;
		margin:10rpx auto;
	}
	.announce{
		margin: 20rpx;
		background-color: #fff;
		height: 120rpx;
		display: flex;
		flex-direction: row;
	}
	.announceLeft{
		font-size: 30rpx;
		line-height: 44rpx;
		width: 80rpx;
		height: 89rpx;
		padding:15rpx;
		text-align: center;
	}
	.announce .swiper-item text{
		overflow: hidden;
		 text-overflow:ellipsis;
		 white-space: nowrap;
	}
	.announce image{
		width:25rpx;
		height:25rpx;
		margin-top:47rpx;
	}
	.announceSwiper{
		width:70%;
		font-size: 24rpx;
		padding:15rpx;
	}
	.announceSwiper swiper{
		height:100rpx
	}
	.announceSwiper .swiper-item{
		display: flex;
		flex-direction: row;
		line-height: 45rpx;
	}
	.task{margin:30rpx 20rpx;}
	.taskIcon image,.incompleteIcon image{
		width:38rpx;
		height: 37rpx;
		position: relative;
		top:8rpx;
		margin-right:10rpx
	}
	.taskIcon,.incompleteIcon{font-size: 30rpx;height: 37rpx;}
	/* .taskIcon{margin-bottom:20rpx} */
	.taskcontent{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		color: #fff;
		margin-top:30rpx
	}
	.taskLeft,.taskRight{
		background-color: #7ECEF4;
		width:48%;height: 159rpx;
		border-radius: 10rpx;
		display: flex;flex-direction: row;justify-content: space-around;
		font-size: 53rpx;
		line-height: 60rpx;
		}
	.taskRight{background-color: #F8B551;}
	.taskLeft image,.taskRight image{width:88rpx;height: 99rpx;margin:30rpx 20rpx 0;}
	.taskTitle view{font-size: 31rpx;}
	.taskTitle{margin: 30rpx;}
	.incomplete{margin: 20rpx;}
	.fire{background-color: #fff;height: 289rpx;font-size: 28rpx;position: relative;border-radius: 10rpx;margin-top: 30rpx;}
	.fire view:first-child{font-weight: 600;padding-top: 40rpx;}
	.fire view:last-child{font-size: 24rpx;color: #999999;margin-top: 31rpx;}
	.fire view{margin:15rpx 53rpx;}
	.prompt{
		position: absolute;top:0;right: 0;
		min-width: 110rpx;height: 63rpx;padding: 0 20rpx;
		background: #07C160;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		margin: 0!important;
		font-size: 24rpx;
		color: #FFFFFF!important;text-align: center;line-height: 63rpx;
		}
		.number{color: #999999;}
		.company{color: #333;}
</style> 
